<template>
<div id="main-box">
    <van-nav-bar
            title="选择售后类型"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />

    <div class="refund-goods">
        <div style="font-size:14px;font-weight: bold;">
            <van-cell-group>
                <van-cell title="订单编号" :value="uuid" />
                <van-cell title="商品" :value="`共${checkedShopCart.length}件`"></van-cell>
                <van-card
                        v-for="(goods) in checkedShopCart.slice(0,2)"
                        :key="goods.id"
                        :num="goods.count===undefined?1:goods.count"
                        :desc="goods.name+goods.colorName+goods.sizeName"
                        :price="goods.price.toFixed(2)"
                        :title="goods.title"
                        :thumb=baseURL1+goods.img
                >
                </van-card>
            </van-cell-group>
        </div>
    </div>
    <div class="refund-type">
        <div style="font-size:14px;font-weight: bold;margin-top:10px">
            选择售后类型
        </div>
        <div>

          <van-cell icon="refund-o">
              <van-row type="flex" justify="space-between">
                  <van-col span="12" @click="refundDetail(1)">  <span style="font-weight: bold">我要退款（无需退货）</span></van-col>
                  <van-col span="2"> <van-icon name="arrow" @click="refundDetail(1)"/></van-col>
              </van-row>
           <div style="font-size:6px;color:#969799;">没收到货，或与卖家协商同意不用退货只退款</div></van-cell>
        </div>
        <div>

            <van-cell icon="refund-o">
                <van-row type="flex" justify="space-between">
                    <van-col span="12" @click="refundDetail(2)">  <span style="font-weight: bold">我要退货退款</span></van-col>
                    <van-col span="2"> <van-icon name="arrow"  @click="refundDetail(2)"/></van-col>
                </van-row>
                <div style="font-size:6px;color:#969799;">已收到货，需要退还收到的货物</div></van-cell>
        </div>
    </div>
</div>
</template>

<script>
    import img from "@/api/api";
    export default {
        name: "refund",
        created() {
            this.checkedShopCart=this.$route.query.checkedShopCart
          this.count=this.$route.query.count
            this.uuid=this.$route.query.uuid
            this.pay=this.$route.query.pay
        },
        data(){
            return {
                checkedShopCart: [],
                baseURL1:img.src,
                uuid:"",
                count:"",
                pay:"",
            }
            },
        methods:{
            onClickLeft(){
              this.$router.go(-1);
            },
            refundDetail(index){
                this.$router.push(
                    {path:'/requestRefund',
                        query:{
                            type:index,
                            uuid:this.uuid,
                            pay:this.pay
                        }
                    })

            }
        }
    }
</script>

<style scoped>
    #main-box{
        height: 100%;
        width: 100%;
        background-color:transparent;
    }
   /deep/ .van-cell {
        color: #323233;
        font-size: 15px;
        line-height: 22px;
    }
   .refund-type{
       margin-left:5px;
       margin-top:10px;
       height:30%;
       border-radius:10px;

   }
   .refund-goods{
       margin-left:5px;
       border-radius:10px;

   }
</style>